<template>
  <div id="app">
    <!-- 卡片组件 -->
    <!-- <el-card class='login-card'> -->
    <!-- 登录表单 -->
    <!-- <el-form ref="loginForm"
               style="margin-top:40px"
               :model="loginForm"
               :rules="loginRules">
        <el-form-item prop="mobile">
          <el-input v-model="loginForm.mobile"
                    placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password"
                    placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     style="width: 100%"
                     @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card> -->
    <el-button @click="test">async</el-button>
    <el-button @click="test1">test1</el-button>
    <el-button @click="getCatch">getCatch</el-button>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data () {
    const checkMobile = function (rule, value, callback) {
      value.charAt(2) === '9' ? callback() : callback(new Error('第三位手机号必须是9'))
    }
    // 定义表单数据对象
    return {
      loginForm: {
        mobile: '',
        password: ''
      },
      // rules规则 
      loginRules: {
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }, {
            trigger: 'blur',
            validator: checkMobile
          }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }, {
          min: 6, max: 16, message: '密码应为6-16位的长度', trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    login () {
      // 获取el-form的实例
      // this.$refs.loginForm.validate(function (isOK) {
      //   if (isOK) {
      //     // 说明校验通过
      //     // 调用登录接口
      //   }
      // }) // 校验整个表单
      this.$refs.loginForm.validate().then(() => {
        console.log('成功');
      }).catch(() => {
        console.log('失败');
      })
    },
    async test () {
      const result = await new Promise(function (resolve) {
        setTimeout(function () {
          resolve(5)
        }, 5000)
      })
      alert(result)
    },
    //1： test1先执行，因为是同步代码
    // test1 () {
    //   this.test()
    //   alert(1)
    // }
    //2： test2后执行，因为已经是异步代码了
    async test1 () {
      await this.test()
      alert(1)
    },
    // 3: async/ await通过,try/catch捕获异常
    async getCatch () {
      try {
        await new Promise(function (resolve, reject) {
          reject(new Error('fail'))
        })
        alert(123)
      } catch (error) {
        alert(error)
      }
    }
  }
}
</script>

<style>
#app {
  width: 100%;
  height: 100vh;
  background-color: pink;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-card {
  width: 440px;
  height: 300px;
}
</style>
